<template>
  <div class="sign-up-wrap">
    <div class="content-wrap">
      <div class="sign-up-item">
      <input
        class="username"
        type="text" v-model="username"
        placeholder-style="color:#A3AAB7"
        placeholder="请输入登录账号"
      >
    </div>
    <div class="sign-up-item">
      <input
        class="password"
        type="password" v-model="userpass"
        placeholder-style="color:#A3AAB7"
        placeholder="请输入密码"
      >
    </div>
    <div class="sign-up-item">
      <input
        class="repassword"
        type="password" v-model="querenpass"
        placeholder-style="color:#A3AAB7"
        placeholder="确认密码"
      >
    </div>

    <div class="sign-up-item">
      <input
        class="code"
        type="text" v-model="yanzhengma"
        placeholder-style="color:#A3AAB7"
        placeholder="请输入图形验证码"
      >
      <img :src="captchaSrc" alt="图片验证码" @click="loadtupian" class="captcha-img">
    </div>
    <div class="user-agreement">
      <checkbox-group @change="agreeValue">
      <checkbox
        value="1"
        name="orderRadio"
        class="user-agreement-checkbox"
      ></checkbox></checkbox-group>
      <p @click="openDetail" class="user-agreement-text">同意用户协议<a @click="openDetail" style="display:inline-block;">{{agreement}}</a></p>
    </div>
    <div
      class="sign-up-item next btn"
      @click="zhuce"
    >注册</div>
    <div
      class="sign-up-item last-step btn"
      @click="signIn"
    >上一步</div>
    </div>
    <!-- <tanchuan ref="tanchuanDel" :title="title" :content="content" @doCancle="doCancleDel"
      @doConfirm="doConfirmDel" ></tanchuan> -->
    <dialogs ref="dialog" :title="title" >
      <!-- <div class="dialog-content-wrap"> -->
        <div class="paragraph">1、为了更好地为您提供服务和帮助、保护您的合法权益，请您保证申请服务时所提供的信息是真实准确、合法、有效的合法权益，请您保证申请服务时所提供的信息是真实、准确、合法、有效。</div>
        <div class="paragraph">
          2、未经您的同意，不会向其他任何公司、组织或个人披露您的个人信息，但下列情况除外：
          <p class="items">(1) 反对宪法所确定的基本原则的；</p>
          <p class="items">(2) 危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
          <p class="items">(3) 损害国家荣誉和利益的；</p>
          <p class="items">(4) 煽动民族仇恨、民族歧视，破坏民族团结的；</p>
          <p class="items">(5) 破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
          <p class="items">(6) 散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
        </div>
        <div class="paragraph">
          3、为保证创头条的正常运营及用户的良好体验，请您不要利用创头条企业号制作、上传、发布、传播如下内容：
          <p class="items">(1) 含有任何性或性暗示以及任何其他低俗类信息；</p>
          <p class="items">(2) 骚扰、垃圾广告；</p>
          <p class="items">(3) 涉及他人隐私、个人信息或资料的任何信息；</p>
          <p class="items">(4) 侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的任何信息；</p>
          <p class="items">(5) 侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的任何信息；</p>
        </div>
      <!-- </div> -->
      <div slot="btn" >
        <p class="knows" @click="close">我知道了</p >
      </div>
    </dialogs>
    <mytoast ref="mytoast" />
  </div>
</template>

<script>
/**
 * * Index
 */
import api from "@/utils/api";
import mytoast from "@/components/toast";

// import tanchuan from "@/components/tanchuan";
// import tanchuan from "@/components/tanchuan";
import dialogs from "@/components/dialogs";
export default {
  name: "Index",

    mixins: [],
  props: {},
  data() {
    return {
      captchaText:'获取验证码',
      cooldown:false, //60s验证时间
      count:60,
      agreement:'《服务条款详情》',
      showDetail:false,
      title:'《服务条款》',
        username : "",
        userpass : "",
        querenpass : "",
        yanzhengma : "",
        captchaSrc : "",
        con_c : "",
        isAgree : ""
    };
  },
  components:{
    dialogs,
    mytoast
  },

    onShow(){
      this.username = wx.getStorageSync("smsMobile");
      this.loadtupian();
    },

  methods: {
    nextStep(){
      this.step++
    },
      loadtupian(){
          var _this = this;
          var requestTask = wx.request({
              url: api.captchaImage ,
              header: {
                  "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              responseType: 'arraybuffer',
              data: {
              },
              success(res) {
                  console.log(res);
                  var base64 = wx.arrayBufferToBase64(res.data);
                  _this.captchaSrc = "data:image/jpeg;base64," + base64
              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
          requestTask.onHeadersReceived((res) => {
              if (res.header && res.header["con_c"]){
                  _this.con_c = res.header["con_c"];
              }
          })
      },

      zhuce(){
          var _this = this;
          if(!_this.username){
              _this.$refs.mytoast.show("请输入登录账号");
              return;
          }
          if(!_this.userpass){
              _this.$refs.mytoast.show("请输入登录密码");
              return;
          }
          if(!_this.querenpass){
              _this.$refs.mytoast.show("请输入确认密码");
              return;
          }
          if(_this.userpass != _this.querenpass){
              _this.$refs.mytoast.show("两次密码不一致");
              return;
          }
          if(!_this.yanzhengma){
              _this.$refs.mytoast.show("请输入图片验证吗");
              return;
          }
          if(!this.isAgree){
              _this.$refs.mytoast.show("请阅读并同意服务条款");
              return;
          }
          wx.request({
              url: api.register + "?con_c="+this.con_c,
              header: {
                  "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              data: {
                  loginName : _this.username,
                  pwd : _this.userpass ,
                  registerSource : "00",
                  code : wx.getStorageSync("smsCode"),
                  uuid : wx.getStorageSync("smsId"),
                  skinFlag : '1',
                  captcha : _this.yanzhengma,
                  merchantType : "1",
                  validationType : "1",
                  openId : wx.getStorageSync("openId")

              },
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      _this.loadtupian();
                      return ;
                  }
                  wx.setStorageSync("otherPath",api.path00);
                  wx.setStorageSync("sessionId", res.data.data);
                  _this.$refs.mytoast.show("注册成功");
                  setTimeout(function () {
                      var url = "../menu/main";
                      mpvue.navigateTo({ url });
                  },1000)

              },
              fail(res) {
                  console.log(res);
                  _this.loadtupian();
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
      },
      agreeValue(e){
          var index = e.mp.detail.value;
          if(index && index.length > 0){
            this.isAgree = index[0];
          }
      },
      signIn(){
          wx.navigateBack({
              delta: 1
          })
      },
    openDetail(){
      this.$refs.dialog.show();
    },
    close(){
      this.$refs.dialog.hidden();
    }
  }
}
</script>
<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
}
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #0077ff;
  background-color: #0077ff;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  content: "\00a0";
  display: inline-block;
  border: 4rpx solid #fff;
  border-top-width: 0;
  border-right-width: 0;
  width: 18rpx;
  height: 10rpx;
  transform: rotate(-50deg);
  position: absolute;
  top: 8rpx;
  left: 6rpx;
}

</style>
<style  scoped>

/* 容器 */
.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 20%;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
/* item项 */
.content-wrap .sign-up-item {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 15rpx auto;
  border-radius: 40rpx;
  box-shadow: 0px 1px 6px 0px rgba(0, 119, 255, 0.16);
  overflow: hidden;
}

/* 输入框 */
.content-wrap input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: left;
  padding-left: 40rpx;
  border-radius: 40rpx;
  background: white;
}
/* 验证码占位 */
input.code{
  padding-right: 200rpx;
}

/* 验证码图片 */
.captcha-img{
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 200rpx;
  height: 80rpx;
}
/* 验证码 */
.captcha-text{
  position: absolute;
  right: 0;
  top: 0;
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #0077FF;
  font-size: 14px;
}
/* 竖线 */
.captcha-text .line{
  display: block;
  position: absolute;
  width: 1px;
  height: 40rpx;
  background: #A3AAB7;
  top: 20rpx;
  left:0rpx;
}
/* 按钮 */
.content-wrap .btn {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
  text-align: center;
  vertical-align: middle;
  box-shadow: 0px 4rpx 6rpx 0px rgba(0, 119, 255, 0.1);
}
/* 下一步 */
.content-wrap .next{
  margin-top: 10rpx;
  color: #fff;
  background: linear-gradient(
    -62deg,
    rgba(4, 171, 245, 1),
    rgba(7, 127, 255, 1)
  );
}
.last-step:active,.next:active{
  opacity: 0.5;
}

.last-step {
  margin-top: 15rpx;
  color: #333;
  border: 1px solid #077fff;
}

.content-wrap .user-agreement{
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 80%;
  height: 40rpx;
  line-height: 40rpx;
  margin: 23rpx auto;

}
.user-agreement-checkbox,.user-agreement-text{
  float: left;
}
.user-agreement-text{
  padding-top: 2rpx;
}
.user-agreement{
  padding-left: 30rpx;
  margin-top: 28rpx;
  font-size: 22rpx;
  color: #767D8F;
}
.user-agreement a{
  color:#0077FF
}

/* 弹窗样式 */
.knows{
  width: 80%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 30rpx;
  color:#373E4F;
  border: 1px solid #0077FF;
}
.paragraph{
  font-size: 22rpx;
  color: #373E4F;
}

.knows{
  height: 60rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  font-size: 30rpx;
  color: #373E4F;
  /* background: rgba(55,62,79,1); */
  /* border:1px solid rgba(0, 0, 0, 1); */
  border-radius:30rpx;
}
.knows:active{
  opacity: 0.5;
}
.paragraph .items{
  color: #767D8F;
}
</style>

